超緊繃!30天Vue.js學習日記 擁抱全家桶系列-東西太多?蓋個倉庫通通塞進去吧!(1)

大家好!時光飛逝,不知不覺也來到第29天了阿...我們也將邁入最後一個主題:Vuex

在官方文件中,將VueX比喻成倉庫,那可能大家會想說,我們不是能利用data選項存放東西了嗎,為什麼還需要Vuex呢?以購物網站為例,當我們今天有多個組件都需要使用同樣的資料,或是會因為一組資料而影響多個組件,這時如果我們用prop以及$emit傳值,會讓一切變得相當複雜,因此我們可以將vuex當做一個狀態管理中心來看,並且讓我們專案中的組件隨著store中資料的改變產生響應,不過今明兩天時間有限,我會以VueX的核心以及相關語法作切入,如果想要更進一步熟悉他,還是得靠實戰熟悉才行。(補充:如果今天只是要開發一個小網站,基本上是不需要使用Vuex的,如果你問我什麼時候會用到呢?我只能說,當你覺得管理狀態越來越母湯,你就會想到它了XD)

#state

狀態樹,用來存放各個參數的狀態。

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '123', done: true }
    ],
    count:0
  }
})

#getter

有點像是Vue中的計算屬性,功能差不多。

const store = new Vuex.Store({
//...
getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

呼叫getters:

this.$store.getters.doneTodos

mapGetters輔助函式

除了上述方法,我們也可以使用mapGetters做到一樣的效果, mapGetters是將getters屬性中的資料投射到vue實例中computed的一個方式

var app = new Vue({
	el:'#app',
	store,
	computed:{
	 ...Vuex.mapGetters([
	 	'doneTodos'
	 	]
	)
	}
})

這樣我們就可以在html中以下面的方式看到getters傳回的值

{{doneTodos}}

#mutation

更改state的唯一方式。

const store = new Vuex.Store({
state: {
    todos: [
      { id: 1, text: '123', done: true }
    ],
    count:0
  },
mutations: {
    increment(state) {
      state.count++
    }
  }
})

從上述範例可以看到,當increment被呼叫時,state中的count就會+1
那我們要怎麼呼叫mutations中的函式呢?

Mutations的呼叫方式跟前面的getters有點不同,必須使用store.commit('')

<button @click="store.commit('increment')">+1</button>

當按鍵被觸發,就使用store.commit('')呼叫increment()

今天的介紹先到這邊結束,需要注意的是:mutation並不支援異步操作,那如果我們會用到異步操作呢?請容我在這邊賣個關子,明天會接續今天的主題繼續說下去,我們明天見~!

本日&明日範例下載:

https://drive.google.com/open?id=1fJprKJa9QX7WjQfrLggTVbDn7QFiBNm3